<template>
  <div id="myChart" :style="{width: '485px', height: '255px'}"></div>
</template>

<script>
import echarts from "echarts";
import Axios from "@/common/js/Axios";
export default {
  mounted() {
    this.drawLine();
  },
  data() {
    return {
      code: localStorage.getItem("bugCode"),
      tmpx: [],
      tmpy: [],
      data: {
        // 绘图区距离四周的距离
        grid: {
          top: "8%",
          left: "8%",
          right: "10%",
          bottom: "10%"
        },
        //用于支持区域缩放
        dataZoom: [
          {
            type: "inside",
            //缩放后滚动条起始位置
            start: 0,
            //缩放后滚动条结束位置
            end: 100
          },
          {
            //是否在下方显示(如果false，只是不显示，功能还在)
            show: false,
            type: "slider",
            // 滚动条距离底部的位置
            y: "90%",
            start: 80,
            end: 100
          }
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.tmpx
        },
        yAxis: {
          type: "value",
          min: "dataMin",
          max: "dataMax"
        },
        series: [
          {
            data: this.tmpy,
            type: "line",
            areaStyle: {}
          }
        ]
      }
    };
  },
  methods: {
    async drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      await Axios.getAxios("/api/stock/kline/hourly/" + this.code, {}, {}).then(
        res => {
          for (let i = 0; i < res.data.length; i++) {
            this.tmpx.push(res.data[i][0]);
            this.tmpy.push(res.data[i][1]);
          }
          this.data.xAxis.data = this.tmpx;
          this.data.series[0].data = this.tmpy;
        }
      );
      // 绘制图表
      myChart.setOption(this.data);
    }
  }
};
</script>

<style>
</style>
